﻿@{
    Layout = null;
    var errorType = TempData["ErrorType"] as string;
    var errorMessage = TempData["ErrorMessage"] as string;
}
@using OLMS_MVC2.Models

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>登录 - 在线音乐商店</title>
    <link href="~/Assets/css/pure-min.css" rel="stylesheet" />
    <link href="~/Assets/css/font-awesome.min.css" rel="stylesheet" />
    <link href="~/Assets/css/grids-responsive-min.css" rel="stylesheet" />
    <link href="~/Assets/css/pure-extends.css" rel="stylesheet" />
    <link href="~/Assets/css/main.css" rel="stylesheet" />
    <link href="~/Assets/css/login.css" rel="stylesheet" />
    <style>
        .error-message {
            color: #ff0000;
            margin: 10px 0;
            text-align: center;
        }

        .validate-code-container {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }

        .validate-code-img {
            margin-left: 10px;
            cursor: pointer;
            height: 36px;
        }
    </style>
</head>

@if (!string.IsNullOrEmpty(errorType))
{
    <script>
        $(document).ready(function() {
            // 显示错误弹窗
            alert("@Html.Raw(errorMessage)");

            // 如果是密码错误，自动切换回注册面板并填充之前的值
            @if (errorType == "password_mismatch")
            {
                <text>
                switchToRegister();
                </text>
            }
        });
    </script>
}

<body>
    <div class="pure-g login-container">
        <div class="pure-u-md-2-3"></div>
        <div class="pure-u-md-1-3 login">
            <h1>在线音乐商店</h1>

            <!-- 错误信息显示 -->
            @if (TempData["ErrorMessage"] != null)
            {
                <div class="error-message">
                    @TempData["ErrorMessage"]
                </div>
            }

            <!-- 登录面板 (默认显示) -->
            <div id="pnlLogin" class="pure-form">
                @using (Html.BeginForm("Login", "Excel", FormMethod.Post, new { id = "loginForm" }))
                {
                    @Html.AntiForgeryToken()

                    <div class="pure-g">
                        <div class="pure-u-1 pure-u-md-2-3">
                            <label for="loginId">登录账号：</label>
                            <input type="text" id="loginId" name="loginId" value="lli" class="pure-u-23-24" />
                        </div>
                        <div class="pure-u-1 pure-u-md-2-3">
                            <label for="loginPwd">登录密码：</label>
                            <input type="password" id="loginPwd" name="loginPwd" value="123456" class="pure-u-23-24" />
                        </div>
                        <div class="pure-u-1 pure-u-md-2-3">
                            <label for="validateCode">验证码：</label>
                            <div class="validate-code-container">
                                <input type="text" id="validateCode" name="validateCode" class="pure-u-23-24" />
                                <img src="@Url.Action("ValidateCode", "Excel")"
                                     class="validate-code-img"
                                     alt="验证码"
                                     title="看不清楚，试一试！"
                                     onclick="this.src='@Url.Action("ValidateCode", "Excel")?t='+new Date().getTime()" />
                            </div>
                        </div>
                        <div class="pure-u-1 pure-u-md-1-2">
                            <p></p>
                            <button type="submit" class="button-default pure-button pure-button-primary">登录</button>
                        </div>
                        <div class="pure-u-1 pure-u-md-1-2">
                            <p></p>
                            <a href="javascript:switchToRegister()" class="button-default pure-button">注册</a>
                        </div>
                    </div>
                }
            </div>

            <!-- 注册面板 (初始隐藏) -->
            <div id="pnlRegister" class="pure-form" style="display:none;">
                @using (Html.BeginForm("Register", "Excel", FormMethod.Post, new { id = "registerForm" }))
                {
                    @Html.AntiForgeryToken()

                    <div class="pure-g">
                        @{
                            var formData = TempData["FormData"] as RegisterViewModel ?? new RegisterViewModel();
                        }

                        <div class="pure-u-1 pure-u-md-2-3">
                            <label for="LoginId">登录账号：</label>
                            <input type="text" id="LoginId" name="LoginId" value="@formData.LoginId" class="pure-u-23-24" />
                        </div>
                        <div class="pure-u-1 pure-u-md-2-3">
                            <label for="LoginPwd">登录密码：</label>
                            <input type="password" id="LoginPwd" name="LoginPwd" class="pure-u-23-24" />
                        </div>
                        <div class="pure-u-1 pure-u-md-2-3">
                            <label for="ValidLoginPwd">确认密码：</label>
                            <input type="password" id="ValidLoginPwd" name="ValidLoginPwd" class="pure-u-23-24" />
                        </div>
                        <div class="pure-u-1 pure-u-md-2-3">
                            <label for="UserName">用户姓名：</label>
                            <input type="text" id="UserName" name="UserName" value="@formData.UserName" class="pure-u-23-24" />
                        </div>
                        <div class="pure-u-1 pure-u-md-2-3">
                            <label for="Phone">联系电话：</label>
                            <input type="text" id="Phone" name="Phone" value="@formData.Phone" class="pure-u-23-24" />
                        </div>
                        <div class="pure-u-1 pure-u-md-1-2">
                            <p></p>
                            <button type="submit" class="button-default pure-button pure-button-primary">注册</button>
                        </div>
                        <div class="pure-u-1 pure-u-md-1-2">
                            <p></p>
                            <a href="javascript:switchToLogin()" class="button-default pure-button">返回</a>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>

    <script src="~/Scripts/jquery-3.7.0.min.js"></script>
    <script>
        // 切换到注册面板
        function switchToRegister() {
            $('#pnlLogin').hide();
            $('#pnlRegister').show();
            // 清空错误信息
            $('.error-message').empty();
        }

        // 切换回登录面板
        function switchToLogin() {
            $('#pnlRegister').hide();
            $('#pnlLogin').show();
            // 清空错误信息
            $('.error-message').empty();
        }

        // 自动刷新验证码（防止缓存）
        $(document).ready(function () {
            var validateCodeImg = $('.validate-code-img');
            validateCodeImg.attr('src', validateCodeImg.attr('src') + '?t=' + new Date().getTime());
        });
    </script>
</body>
</html>